<template>
  <!-- 流程表单详情抽屉 -->
  <div class="flow-flowForm-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>流程表单详情-{{state.formData.name}}</h4>
      </template>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px;">
        <el-tab-pane label="表单详情" name="0">
          <div class="form-create-show">
            <FormCreate :option="detailData.option" :rule="detailData.rule" :disabled="true" v-model="formData" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="审批记录" name="1">
          <FlowLog ref="flowLogRef" :form-id="formId" :form-table="formTable" :key="formId"/>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="2">
          <ShowFlowDesign ref="showFlowCheckRef" />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
// 引入 form-create
import formCreate from '@form-create/element-ui'
// 引入 form-create-edit
import FcEditor from "@form-create/component-wangeditor";
import {reactive, ref, getCurrentInstance, toRefs} from 'vue';
import {getFlowForm, getFlowFormData} from "/@/api/flow/flowForm";
import {
  FlowFormEditState, FlowFormTableColumns
} from "/@/views/flow/flowForm/list/component/model"
import {setConfAndFields2} from "/@/utils/formCreate";
import FlowLog from "/@/components/gFlow/flowLog.vue";
import ShowFlowDesign from "/@/components/gFlow/showDesign.vue";
import {TabsPaneContext} from "element-plus";
import {getRunStep} from "/@/api/flow/flowModel";
formCreate.component(FcEditor)
//获取 formCreate 组件
const FormCreate = formCreate.$form();
defineOptions({ name: "dataDetail"})
const props = defineProps({
  statusOptions:{
    type:Array,
    default:()=>[]
  },
})
const flowLogRef = ref()
const showFlowCheckRef = ref()
const formId = ref(0)
const formTable = ref('')
const activeName = ref('0')
const handleClick = (tab: TabsPaneContext) => {
  if(tab.index=="1"){
    flowLogRef.value.getLogList()
  }else if(tab.index=="2"){
    getRunStep({formTable:formTable.value,formId:formId.value}).then((res:any)=>{
      showFlowCheckRef.value.showDesign({flowId:res.data.data?.runFlow||'0',processId:res.data.data?.runFlowNode||''})
    })
  }
}
const {proxy} = <any>getCurrentInstance()
const dataId = ref(0)
const formData = ref({});
const detailData = ref({
  rule: [],
  option: {} as any,
})
const state = reactive<FlowFormEditState>({
  loading:false,
  isShowDialog: false,
  formData: {
    id: undefined,
    name: undefined,
    status: false ,
    remark: undefined,
    createdAt: undefined,
    updatedAt: undefined,
    deletedAt: undefined,
    createdBy: undefined,
    updatedBy: undefined,
    conf: undefined,
    fields: undefined,
  },
  // 表单校验
  rules: {
    name : [
      { required: true, message: "表单名不能为空", trigger: "blur" }
    ],
    status : [
      { required: true, message: "状态不能为空", trigger: "blur" }
    ],
  }
});
const {isShowDialog} = toRefs(state);
// 打开弹窗
const openDialog = async (row?: FlowFormTableColumns) => {
  resetForm();
  if(row) {
    formId.value = row.actionBtn.wfFid
    formTable.value = row.actionBtn.wfType
    await getFlowForm(row.id!).then((res:any)=>{
      const data = res.data;
      data.createdBy = data.createdUser?.userNickname
      data.updatedBy = data.updatedUser?.userNickname
      state.formData = data;
      setConfAndFields2(detailData, data.conf, data.fields)
      detailData.value.option.submitBtn = false //隐藏提交按钮
      detailData.value.option.resetBtn = false //隐藏重置按钮
    })
    if(row.dataId && row.dataId!=0){
      dataId.value = row.dataId
      //获取表单数据
      getFlowFormData({formId:row.id,dataId:row.dataId}).then((res:any)=>{
        formData.value = res.data.data
      })
    }
  }
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
const resetForm = ()=>{
  state.formData = {
    id: undefined,
    name: undefined,
    status: false ,
    remark: undefined,
    createdAt: undefined,
    updatedAt: undefined,
    deletedAt: undefined,
    createdBy: undefined,
    updatedBy: undefined,
    conf: undefined,
    fields: undefined,
  }
  dataId.value = 0
  formData.value = {};
  activeName.value = '0'
};
defineExpose({openDialog})
</script>
<style scoped>
/*.flow-flowForm-detail :deep(.el-form-item__content ._fc-submit-btn),
.flow-flowForm-detail :deep(.el-form-item__content ._fc-reset-btn){
  display: none;
}*/
.flow-flowForm-detail :deep(.el-form-item__label){
  font-weight: bolder;
}
.pic-block{
  margin-right: 8px;
}
.file-block{
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  margin-bottom: 5px;
  padding: 3px 6px;
}
.ml-2{margin-right: 5px;}
.form-create-show{
  width: 100%;
  padding: 16px;
}
</style>
